<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<!-- amazeui -->
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/ui/css/amazeui.min.css" />
		<!-- lib -->
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/lib/swiper/css/swiper.min.css" />
		<!-- app -->
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/app/css/ui.css" />
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/app/css/header.css"/>
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/app/css/allorder.css"/>
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/app/css/footer.css"/>
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/app/css/attention.css"/>
		<link rel="stylesheet" href="${BASE_PATH}/static/lib/myAlert/myAlert.css" />
		<title>我的消息</title>
		<style type="text/css">
		   body{
			 background:#fafafa ;
			} 
			.shouye{
				background-position: 0px -28px;
			}
			.choose_dian_on{
				background: url(${BASE_PATH}/static/app/img/shopCar.png) no-repeat 0px 0px;
				background-size:230%;
			}
			 .logo_pic{
				width: 30px;
				height: 30px;
				border-radius:30px;
				display: inline-block;
				background: url(${BASE_PATH}/static/app/img/logo.png) no-repeat ;
				margin-left: 3px;
				margin-top: 3.5px;
				float: left;
			}
			.logo_text{
				height: 40px;
				line-height: 40px;
				display: inline-block;
				color: #595b60;
				font-size: 14px;
				margin-left: 6px;
				float: left;
			}
			.texts{
				display: inline-block;
				width:100%;
				height: 51px;
				float: left;
				font-size: 14px;
				color: #5C5C67;
				margin-top: 5px;
				line-height: 16px;
			}
			.textb{
				display: inline-block;
				/* width: 20%; */
				float: right;
				font-size: 14px;
				margin-right: 10px;
				line-height: 16px;
			/* 	background-color: #afdada; */
			}
			.texta{
				display: inline-block;
				width: 5%;
				float: left;
				font-size: 14px;
				margin-top: 5px;
				line-height: 16px;
			}
			 .mys {
				display: inline-block;
				position: absolute;
				width: 12px;
				height: 12px;
				background-color: red;
				font-size: 14px;
				line-height: 16px;
				text-align: center;
				color: #FFFFFF;
				border-radius: 8px;
			}
			.showw{
				margin-bottom: 50px;
				margin-top: 40px;
			}
			.nin{
				margin-top: 40px;
			}
			.att_goods{
				width: 100%;
				height: 110px;
				background: #ffffff;
				border-bottom: 1px solid #fafafa;
				border-radius: 20px;
			}
			.hed_ltexts{
			   /*  margin-right: 6px;  */
				line-height: 24px;
				float: right;
				margin-top: 10px;
				color: #c0c0c0;
				height:20px;
				overflow: hidden;
				display:block;
				width: 100px;
				text-overflow: ellipsis; 
       			 -o-text-overflow: ellipsis;
       			 white-space:nowrap;
			}
			.hed_ltextd{
			   /*  margin-right: 6px;  */
				line-height: 24px;
				margin-top: 10px;
				color: #b7eae8;
				font-weight:500;
			}
			.hed_ltextds{
				line-height: 24px;
				margin-top: 10px;
				color: #f797b7;
				font-weight:500;
			}
			.goods_header {
				width:93%;
			    margin-left: 2em;
			    margin-right: 1em;
			}
			.aaa{
			   	color: #e0e0e1;
			 }
			 .text_boxa {
			    height: 20px;
			    width: 95%;
			    line-height: 20px;
			    font-size: 12px;
			    text-align: center;;
			    color: #c0c0c0;
			}
			.bstat {
			    width: 10px;
			    height: 10px;
			    display: inline-block;
			    background-color: red;
			    border-radius: 10px;
			    float: left;
			    margin-top: 45.5px;
			    margin-right: 5px;
			}
		</style>
	</head>
	<body >
		 	<div class="app-part app-part-flow nin">
				<header>
					<div class="header">
						<span class="back" onclick="javascript:history.go(-1);"></span>
						<a href="${BASE_PATH}/index"><span class="logo_pic"></span></a>
						<span class="logo_text">OK 妈咪</span>
						<span class="header_tab">编辑</span>
					</div>
			 	</header>
				<div class="content am-g app-goods-list " id="messList">
				</div>
			</div>
			<div class="bottom_btn_box">
				<img src="${BASE_PATH}/static/app/img/delete.png" style="margin:0 auto;display:block;width: 8%;" width="140" onclick="doDelAll();">
			</div>
			<div data-am-widget="gotop" class="am-gotop am-gotop-fixed" >
				<a href="#top"><span class="am-gotop-title">回到顶部</span><i class="am-gotop-icon am-icon-chevron-up"></i></a>
			</div>
		
			<!-- lib -->
		<script type="text/javascript" src="${BASE_PATH}/static/lib/jquery/jquery-1.11.2.min.js"></script>
		<!-- amazeui -->
		<script type="text/javascript" src="${BASE_PATH}/static/ui/js/amazeui.min.js"></script>
		<!-- lib -->
		<script type="text/javascript" src="${BASE_PATH}/static/lib/swiper/js/swiper.jquery.min.js"></script>
		<script type="text/javascript" src="${BASE_PATH}/static/lib/layer/layer.js"></script>
		<script type="text/javascript" src="${BASE_PATH}/static/lib/template/template.js"></script>
		<script type="text/javascript" src="${BASE_PATH}/static/lib/jquery-lazyload/jquery.lazyload.min.js"></script>
		<script type="text/javascript" src="${BASE_PATH}/static/lib/jquery-marquee/jquery.marquee.min.js"></script>
		<script type="text/javascript" src="${BASE_PATH}/static/lib/myAlert/module.js"></script>
		<!-- app -->
		<script type="text/javascript" src="${BASE_PATH}/static/app/js/kit.js"></script>
		<script type="text/javascript">
		var pageNum = 0,totalPage = 1,loading = false;
		var loading = false;
		$(".bottom_btn").click(function(){
			$(".choose_dian").removeClass("show");
			$(".bottom_btn_box").removeClass("show");
			$(".bottom_btn").removeClass("show");
			$(".content").removeClass("contentshow"); 
			$(".att_goods").each(function(){ 
				var s =  $(this).children(".choose_dian").hasClass("choose_dian_on");
				if(s == true){
					$(this).remove();
				}
			})
		})
			$(".header_tab").click(function(){
				$(".choose_dian").addClass("show");
				$(".bottom_btn_box").addClass("show");
				$(".bottom_btn").addClass("show");
				$(".content").addClass("contentshow");
				$(".bstat").css("display","none");//修改display属性为none
			})
			$(".content").on("click", ".att_goods", function(){
				var s = $(this).children(".choose_dian").hasClass("show");
				if(s == true){
					$(this).toggleClass("choose_dian_onn");
					$(this).children(".choose_dian").toggleClass("choose_dian_on");
				}
			});
			//删除选中的消息
			function doDelAll(){
				var $all = $(".att_goods.choose_dian_onn");
				var messids = new Array();
				if($all.length!=0){
						//移除选中的商品
						$all.each(function(index,item){
							messids.push($(item).data("messid"));
						});
					/* 	Kit.ui.confirm("确认删除这"+$all.length+"条消息吗？",function(){ */
							Kit.ajax.post("${BASE_PATH}/my/cancelMess",{messid:messids.join(",")},function(result){
								if(result.flag==0){
									//我的关注中没有其他商品时，刷新页面
									Kit.render.refresh();
								}
							});
					/* 	}); */
					
				} else {
					Kit.ui.alert("请选择您要删除的消息！");
				}
			}
		$(function(){
			//绑定“加载中”进入加载事件
			Kit.util.onPageEnd(function(){
               	if(pageNum < totalPage && !loading){
               		loading = true;
               		$("#messList").append("<div class=\"app-loading\">正在加载</div>");
                	Kit.ajax.post("${BASE_PATH}/my/messList",{pageNum:pageNum+1,pageSize:5},function(result){
						$("#messList").append(template("dataTpl",result.object));
						//amazeui要求在最后一个元素上添加am-u-end样式，否则默认为右浮动
						$(".app-goods-item","#messList").removeClass("am-u-end").last().addClass("am-u-end");
						$(".app-loading","#messList").remove();
						pageNum = result.object.pageNumber;
						totalPage = result.object.totalPage;
						//没找到数据
						if(totalPage==0) {
							$("#messList").append(template("dataTpls"));
						}
						//重置加载标识
						loading = false;
					});
               	}
			});
		});
	 
	 	function detail(from,type,id,state){
	 		if(state==1){
		 		Kit.ajax.post("${BASE_PATH}/my/messState",{id:id},function(result){
		 			if(result.flag==0){
		 				if(type==1){
		 					window.location.href="${BASE_PATH}/order/detail/"+from;
		 				}else if(type==2){
		 					window.location.href=from;
		 				}
					}
		 		})
	 		}else{
	 			if(type==1){
 					window.location.href="${BASE_PATH}/order/detail/"+from;
 				}else if(type==2){
 					window.location.href=from;
 				}
	 		}
	 		
	 	}
		</script>
		<!-- tpl <span class="texta"><span class="mys"></span></span>-->
		<script type="text/html" id="dataTpl">
			{{each list as mess index}}
				<div data-messid="{{mess.id}}" class="goods_boxs am-u-md-4 am-u-lg-3 app-goods-item att_goods">
						<span class="choose_dian"></span>
						{{if mess.state==1}}
							<span class="bstat"></span>
						{{/if}}
						<div class="goods_header" >
							<div class="text_boxa">
								<span class="hed_ltext">{{mess.createDate}}</span>
							</div>
								{{if mess.type ==1}}
									<div class="text_boxs" onclick="detail('{{mess.from}}','{{mess.type}}','{{mess.id}}','{{mess.state}}');">
										<span class="hed_ltextd">{{mess.title}}</span>
										<span class="hed_ltexts" >订单号：{{mess.from}}</span>
									</div>
									<div class="text_boxs" onclick="detail('{{mess.from}}','{{mess.type}}','{{mess.id}}','{{mess.state}}');">
										<span class="texts">{{mess.des}}</span>
									</div>
								{{else if mess.type ==2}}
										<div class="text_boxs" onclick="detail('{{mess.from}}','{{mess.type}}','{{mess.id}}','{{mess.state}}');">
											<span class="hed_ltextds">{{mess.title}}</span>
										</div>
										<div class="text_boxs" onclick="detail('{{mess.from}}','{{mess.type}}','{{mess.id}}','{{mess.state}}');">
											<span class="texts">{{mess.des}}</span>
										</div>
								{{/if}}
						</div>
				</div>
			{{/each}}
		</script>
		<script type="text/html" id="dataTpls">
			<div style="margin-top:7rem;">
				<div>
					<img src="${BASE_PATH}/static/app/img/mess.png" style="margin:0 auto;display:block;" width="140">
					<div class="am-text-center app-m-t-10 aaa">您暂无消息哦~</div>
				</div>
			</div>
		</script>
	</body>

</html>
